<template>
    <div class="article-meta">
        <nuxt-link :to="{
      name: 'profile',
      params: {
        username: article.author.username
      }
    }">
            <img :src="article.author.image" />
        </nuxt-link>
        <div class="info">
            <nuxt-link class="author" :to="{
        name: 'profile',
        params: {
          username: article.author.username
        }
      }">
                {{ article.author.username }}
            </nuxt-link>
            <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
        </div>
        <template v-if="article.author.username === user.username">
          <span>
                <button class="btn btn-outline-secondary btn-sm"  @click="onEditArticle(article.slug)" >
            <i class="ion-edit"></i>
            &nbsp;
             Edit Article
        </button>
        &nbsp;&nbsp;
        <button class="btn btn-outline-danger btn-sm"  @click="onDelectArticle(article.slug)" >
             <i class="ion-trash-a"></i> Delete Article
        </button>

          </span>
        </template>
     <template v-else>
       <span>
          <button class="btn btn-sm btn-outline-secondary" :class="{
        active: article.author.following
      }" @click="onFollow(article.author)" :disabled="article.author.followingDisabled">
            <i class="ion-plus-round"></i>
            &nbsp;
            {{!article.author.following?'Follow':'Unfollow'}} {{ article.author.username }}
        </button>
        &nbsp;&nbsp;
        <button class="btn btn-sm btn-outline-primary" :class="{
        active: article.favorited
      }" @click="onFavorite(article)" :disabled="article.favoriteDisabled">
            <i class="ion-heart"></i>
            &nbsp;
            {{!article.favorited?'Favorite':'Unfavorite'}} Post <span
                  class="counter">({{article.favoritesCount}})</span>
        </button>
        </span>
     </template>
    </div>
</template>

<script>
import { addFavorite, deleteFavorite,deleteArticles } from '@/api/article'
import { addFollow, deleteFollow } from '@/api/profiles'
import { mapState } from 'vuex'

export default {
    name: 'ArticleMeta',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    methods: {
        async onFavorite(article) {
            article.favoriteDisabled = true
            if (article.favorited) {
                // 取消点赞
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
            } else {
                // 添加点赞
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
            }
            article.favoriteDisabled = false
        },
        async onFollow(profiles) {
            profiles.followingDisabled = true
            if (profiles.following) {
                // 取消点赞
                await deleteFollow(profiles.username)
                profiles.following = false
            } else {
                // 添加点赞
                await addFollow(profiles.slug)
                profiles.following = true
            }
            profiles.followingDisabled = false
        },
        async onEditArticle(slug){
          this.$router.push({ name: 'editor', query: { slug: slug } })
          // this.$router.push({ name: 'editor', query: { slug: slug } })
        },
        async onDelectArticle(slug){
            await deleteArticles(slug)
            this.$router.push('/')
        }
    },
       computed: {
        ...mapState(['user'])
    }
}
</script>

<style>
</style>
